<template>
    <view class="settlement-container">
        <!-- 结算信息卡片 -->
        <view class="info-card">
            <view class="info-item">
                <text class="label">结算平台</text>
                <text class="value">{{settlementInfo.union_type_name}}</text>
            </view>
            <view class="info-item">
                <text class="label">结算编号</text>
                <text class="value">{{settlementInfo.settlement_no}}</text>
            </view>
            <view class="info-item">
                <text class="label">结算时间</text>
                <text class="value">{{settlementInfo.settlement_at}}</text>
            </view>
            <view class="info-item">
                <text class="label">订单数量</text>
                <text class="value highlight">{{settlementInfo.order_count}}笔</text>
            </view>
            <view class="info-item">
                <text class="label">联盟名称</text>
                <text class="value">{{settlementInfo.union_name}}</text>
            </view>
        </view>

        <!-- 金额信息卡片 -->
        <view class="info-card">
            <view class="info-item">
                <text class="label">总结算金额</text>
                <text class="value">￥{{settlementInfo.total_amount}}</text>
            </view>
            <view class="info-item">
                <text class="label">用户补贴</text>
                <text class="value">￥{{settlementInfo.pay_amount}}</text>
            </view>
            <view class="info-item">
                <text class="label">平台补贴</text>
                <text class="value">￥{{settlementInfo.service_subsidy_amount}}</text>
            </view>
            <view class="info-item">
                <text class="label">一级补贴</text>
                <text class="value">￥{{settlementInfo.parent1_pay_amount}}</text>
            </view>
            <view class="info-item">
                <text class="label">二级补贴</text>
                <text class="value">￥{{settlementInfo.parent2_pay_amount}}</text>
            </view>
            <view class="info-item">
                <text class="label">服务费</text>
                <text class="value highlight">￥{{settlementInfo.service_amount}}</text>
            </view>
        </view>
    </view>
</template>

<script>
import request from '@/utils/request'

export default {
    data() {
        return {
            id: '', // 结算记录ID
            settlementInfo: {
                union_type_name: '',
                settlement_no: '',
                settlement_at: '',
                total_amount: '',
                pay_amount: '',
                parent1_pay_amount: '',
                parent2_pay_amount: '',
                service_amount: '',
                service_subsidy_amount: '',
                order_count: 0,
                union_name: ''
            }
        }
    },
    onLoad(options) {
        if (!options.id) {
            uni.showModal({
                title: '错误提示',
                content: '缺少必要的参数',
                showCancel: false,
                success: () => {
                    uni.navigateBack()
                }
            })
            return
        }
        this.id = options.id
        this.getSettlementInfo()
    },
    methods: {
        // 获取结算详情
        async getSettlementInfo() {
            if (!this.id) return
            
            try {
                const res = await request({
                    url: '/wechat/admin/settlementInfo',
                    data: { id: this.id }
                })
                
                if (res.code === 0 && res.data) {
                    this.settlementInfo = res.data
                    // 如果没有返回数据，说明记录不存在
                    if (!this.settlementInfo) {
                        uni.showModal({
                            title: '错误提示',
                            content: '结算记录不存在',
                            showCancel: false,
                            success: () => {
                                uni.navigateBack()
                            }
                        })
                    }
                } else {
                    uni.showModal({
                        title: '错误提示',
                        content: res.message || '获取结算详情失败',
                        showCancel: false,
                        success: () => {
                            uni.navigateBack()
                        }
                    })
                }
            } catch (err) {
                console.error('获取结算详情失败', err)
                uni.showToast({
                    title: '加载失败',
                    icon: 'none'
                })
            }
        }
    }
}
</script>

<style>
.settlement-container {
    min-height: 100vh;
    background-color: var(--bg-main);
    padding: 30rpx;
}

.info-card {
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 2rpx solid var(--border-color);
}

.info-item:last-child {
    border-bottom: none;
}

.label {
    font-size: 28rpx;
    color: var(--text-secondary);
}

.value {
    font-size: 28rpx;
    color: var(--text-main);
}

.value.highlight {
    color: var(--error-color);
    font-weight: bold;
    font-size: 32rpx;
}
</style>
